<script setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from './store/modules/user'
import AppHeader from './components/common/AppHeader.vue'
import AppFooter from './components/common/AppFooter.vue'

const router = useRouter()
const userStore = useUserStore()

// 初始化应用
onMounted(() => {
  // 从本地存储加载用户信息
  userStore.loadUserInfo()
  
  // 路由守卫 - 检查登录状态
  router.beforeEach((to, from, next) => {
    // 不需要登录的页面直接放行
    const noAuthPaths = ['/', '/product/list', '/product/detail', '/login', '/register', '/search', '/category']
    if (noAuthPaths.includes(to.path)) {
      next()
      return
    }
    
    // 需要登录的页面检查登录状态
    if (userStore.isLogin) {
      next()
    } else {
      // 未登录则跳转到登录页，并记录当前页面以便登录后返回
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  })
})
</script>

<template>
  <div id="app">
    <!-- 顶部导航栏 -->
    <AppHeader />
    
    <!-- 主内容区域 -->
    <main class="main-container">
      <router-view />
    </main>
    
    <!-- 底部版权信息 -->
    <AppFooter />
  </div>
</template>

<style scoped>
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: $bg-color;
}

.main-container {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .main-container {
    padding: 10px;
  }
}
</style>